:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
  
  --gray-100: $gray-100;
  --gray-200: $gray-200;
  --gray-300: $gray-300;
  --gray-400: $gray-400;
  --gray-500: $gray-500;
  --gray-600: $gray-600;
  --gray-700: $gray-700;
  --gray-800: $gray-800;
  --gray-900: $gray-900;
}
